import React, { Component } from 'react'

const carContext = React.createContext()
const {Provider,Consumer} = carContext


function C(){
	return (
		<div style={{backgroundColor:'skyblue',padding:'10px'}}>
			<h2>我是C组件，我收到了一台车:
			<Consumer>
				{value => value.car}
			</Consumer>
			</h2>
		</div>
	)
}

// class C extends Component {
// 	static contextType = carContext
// 	render() {
// 		console.log(this)
// 		return (
// 			<div style={{backgroundColor:'skyblue',padding:'10px'}}>
// 				<h2>我是C组件，我收到了一台车:{this.context.car}</h2>
// 			</div>
// 		)
// 	}
// }

class B extends Component {
	render() {
		return (
			<div style={{backgroundColor:'orange',padding:'10px'}}>
				<h2>我是B组件</h2>
				<C/>
			</div>
		)
	}
}

export default class A extends Component {g
	state = {car:'奔驰c63',name:'老刘'}
	render() {
		return (
			<div style={{backgroundColor:'gray',padding:'10px'}}>
				<h2>我是A组件，我有台车：{this.state.car}</h2>
				<Provider value={{...this.state}}>
					<B/>
				</Provider>
			</div>
		)
	}
}
